<template>
  <div class="love">
    <div class="love-header">
      <div class="love-header-title">
        歌单
      </div>
      <div class="love-header-info">
        <div class="love-header-info-img">
          <img src="../../assets/img/loading.png" alt="">
          <span></span>
          <div class="playcount"><i class="el-icon-headset"></i>0</div>
          <i class="el-icon-star-off"></i>
        </div>
        <div class="love-header-info-content">
          <div class="love-music-name">我喜欢的音乐</div>
          <div class="love-music-user">
            <span><img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="">未登录</span>
            <span>2019-12-10 创建</span>
          </div>
          <div class="love-music-operation">
            <span class="operation-collection"><i class="el-icon-folder-add"></i>收藏</span>
            <span class="operation-message"><i class="el-icon-chat-dot-square"></i>评论</span>
            <span class="operation-share"><i class="el-icon-position"></i>分享</span>
            <span class="operation-download"><i class="el-icon-download"></i>下载全部</span>
            <span class="operation-more">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  <i class="el-icon-more"></i>更多
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item disabled>删除下载文件</el-dropdown-item>
                  <el-dropdown-item>固定到开始屏幕</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="love-main">
      <div class="love-main-header">
        <div class="love-main-header-left">
           <div :class="{'disable':lovemusiclsit.length<=0}"><i class="el-icon-video-play"></i>播放全部(0)</div>
           <div></div>
           <div :class="{'disable':lovemusiclsit.length<=0}"><i class="el-icon-finished"></i>选择</div>
        </div>
        <div class="love-main-header-right">
          <el-input placeholder="搜索歌单歌曲" suffix-icon="el-icon-search" v-model="lovesearch" clearable></el-input>
        </div>
      </div>
      <div class="love-main-container">
        <el-scrollbar>
          <ul>
            <li class="love-music-list" v-for="(z,index) in 0" :key="index">
               <div class="music-list-index">{{z | filterNumber}}</div>
               <div class="music-list-love"><i class="el-icon-star-on"></i></div>
               <div class="music-list-song">Despacito(Remix)</div>
               <div class="music-list-singer ellipsis">Daddy Yankee/Justin Bieber/Luis Fonsi</div>
               <div class="music-list-album">Despacito(Remix)</div>
               <div class="music-list-time">99:99</div>
            </li>
          </ul>
          <div class="nonemusiclist">
            <p>赶快去收藏你喜欢的音乐</p>
            <p>你可以点击<i class="el-icon-star-on"></i>收藏喜欢的音乐到歌单</p>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        lovesearch:'',
        lovemusiclsit:[],
      }
    },
  }
</script>
<style scoped="scoped">
.love{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.love-header{
  width: 100%;
  height: 250px;
  padding: 0px 28px;
  background: linear-gradient(#ccc 1%,#fafafc 99%);
  position: relative;
}
.love-header-title{
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  color: #666;
  font-weight: 600;
  font-size: 12px;
}
.love-header-info{
  width: 100%;
  height: 198px;
  display: flex;
}
.love-header-info-img{
  width: 198px;
  height: 198px;
  overflow: hidden;
  position: relative;
}
.love-header-info-img>img{
  display: block;
  width: 100%;
  height: 100%;
}
.love-header-info-img>span{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0,0,0,0.7);
  z-index: 2;
  left: 0;
  top: 0;
}
.love-header-info-img>i{
  position: absolute;
  text-align: center;
  font-size: 135px;
  color: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 3;
}
.love-header-info-img>.playcount{
  width: 100%;
  height: 16px;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to right,#404041,#303031);
  z-index: 10;
  text-align: right;
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  padding: 0px 6px;
}
.love-header-info-img>.playcount>i{
  margin-right: 5px;
}
.love-header-info-content{
  flex: 1;
  height: 100%;
  padding-left: 20px;
}
.love-header-info-content>div{
  margin-bottom: 10px;
}
.love-header-info-content .love-music-name{
  width: 100%;
  font-size: 20px;
  color: #000;
}
.love-header-info-content .love-music-user{
  width: 100%;
  display: flex;
  align-items: center;
}
.love-header-info-content .love-music-user>span{
  color: #666;
  display: flex;
  align-items: center;
  font-size: 12px;
  margin-right: 15px;
}
.love-header-info-content .love-music-user>span>img{
  width: 30px;
  height: 30px;
  display: block;
  margin-right: 10px;
}
.love-header-info-content .love-music-operation{
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.love-header-info-content .love-music-operation>span{
  display: flex;
  align-items: center;
  border: 1px solid #c7c7ca;
  background-color: #f1f1f1;
  padding: 5px 8px;
  font-size: 12px;
  margin-right: 8px;
}
.love-header-info-content .love-music-operation>span>i{
  font-size: 16px;
  margin-right: 5px;
  color: #999999;
}
>>>.el-icon-more{
  margin-right: 5px;
}
>>>.el-dropdown-menu__item:hover{
  color: #B32A2B;
  background-color: #e6e6e6;
}
.love-main{
  width: 100%;
  position: absolute;
  top: 250px;
  bottom: 0px;
  left: 0;
  padding: 10px 28px 0px 28px;
}
.love-main .love-main-header{
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.love-main-header .love-main-header-left{
  padding: 0px 12px;
  display: flex;
  align-items: center;
}
.love-main-header .love-main-header-left div{
  margin-right: 10px;
  font-size: 15px;
  display: flex;
  align-items: center;
}
.love-main-header .love-main-header-left div:nth-of-type(2){
  border-right: 1px solid #E4E4E7;
  width: 1px;
  height: 16px;
  margin-right: 10px;
  margin-left: 5px;
}
.love-main-header .love-main-header-left div>i{
  font-size: 20px;
  color: #333;
  margin-right: 5px;
}
.love-main-header .love-main-header-left div:nth-of-type(1)>i{
  color: #DF3B3B;
}
.love-main-header .love-main-header-right{
  display: flex;
  align-items: center;
}
>>>.el-input__inner{
  width: 176px;
  height: 32px;
  border-radius: 20px;
  font-size: 12px;
  border: 1px solid #E4E4E7;
}
>>>.el-input__icon{
  line-height: 32px;
}


.love-main .love-main-container{
  width: 100%;
  top: 60px;
  bottom: 0;
  left: 0;
  position: absolute;
  overflow-y: auto;
  overflow-y: overlay;
  padding: 0 28px;
}
.love-main-container ul li{
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  padding: 0px 12px;
}
.love-main-container ul li:nth-of-type(2n-1){
  background-color: #f4f4f6;
}
.love-main-container ul li:hover{
  background-color: #F2F2F3;
}
.love-main-container ul li div{
  display: flex;
  align-items: center;
  font-size: 12px;
  height: 100%;
}
.love-main-container ul li .music-list-index{
  width: 36px;
  justify-content: center;
  font-size: 13px;
}
.love-main-container ul li .music-list-love{
  width: 28px;
  height: 100%;
  color: #c42d2e;
  font-size: 18px;
}
.love-main-container ul li .music-list-song{
  flex: 1;
  font-size: 14px;
}
.love-main-container ul li .music-list-singer{
  flex: 0.8;
  color: #999999;
}
.love-main-container ul li .music-list-album{
  flex: 0.5;
  color: #999999;
}
.love-main-container ul li .music-list-time{
  flex: 0.2;
  color: #999999;
}


.nonemusiclist{
  text-align: center;
  color: #666;
  padding: 100px 0;
}
.nonemusiclist p:nth-of-type(1){
  font-size: 22px;
  color: #666;
  line-height: 50px;
}
.nonemusiclist i{
  font-size: 22px;
  color: #B32A2B;
}
</style>
